﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>全选练习</title>
	<script type="text/javascript">

		window.onload = function () {


			//获取四个多选框items
			var items = document.getElementsByName("items");
			//获取全选/全不选的多选框
			var checkedAllBox = document.getElementById("checkedAllBox");

			/*
			 * 全选按钮
			 * 	- 点击按钮以后，四个多选框全都被选中
			 */

			//1.#checkedAllBtn
			//为id为checkedAllBtn的按钮绑定一个单击响应函数
			var checkedAllBtn = document.getElementById("checkedAllBtn");
			checkedAllBtn.onclick = function () {


				//遍历items
				for (var i = 0; i < items.length; i++) {

					//通过多选框的checked属性可以来获取或设置多选框的选中状态
					//alert(items[i].checked);

					//设置四个多选框变成选中状态
					items[i].checked = true;
				}

				//将全选/全不选设置为选中
				checkedAllBox.checked = true;


			};

			/*
			 * 全不选按钮
			 * 	- 点击按钮以后，四个多选框都变成没选中的状态
			 */
			//2.#checkedNoBtn
			//为id为checkedNoBtn的按钮绑定一个单击响应函数
			var checkedNoBtn = document.getElementById("checkedNoBtn");
			checkedNoBtn.onclick = function () {

				for (var i = 0; i < items.length; i++) {
					//将四个多选框设置为没选中的状态
					items[i].checked = false;
				}

				//将全选/全不选设置为不选中
				checkedAllBox.checked = false;

			};

			/*
			 * 反选按钮
			 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
			 */
			//3.#checkedRevBtn
			var checkedRevBtn = document.getElementById("checkedRevBtn");
			checkedRevBtn.onclick = function () {

				//将checkedAllBox设置为选中状态
				checkedAllBox.checked = true;

				for (var i = 0; i < items.length; i++) {

					//判断多选框状态
					/*if(items[i].checked){
						//证明多选框已选中，则设置为没选中状态
						items[i].checked = false;
					}else{
						//证明多选框没选中，则设置为选中状态
						items[i].checked = true;
					}*/

					items[i].checked = !items[i].checked;

					//判断四个多选框是否全选
					//只要有一个没选中则就不是全选
					if (!items[i].checked) {
						//一旦进入判断，则证明不是全选状态
						//将checkedAllBox设置为没选中状态
						checkedAllBox.checked = false;
					}
				}

			};

			/*
			 * 提交按钮：
			 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
			 */
			//4.#sendBtn
			//为sendBtn绑定单击响应函数
			var sendBtn = document.getElementById("sendBtn");
			sendBtn.onclick = function () {
				//遍历items
				for (var i = 0; i < items.length; i++) {
					//判断多选框是否选中
					if (items[i].checked) {
						alert(items[i].value);
					}
				}
			};


			//5.#checkedAllBox
			/*
			 * 全选/全不选 多选框
			 * 	- 当它选中时，其余的也选中，当它取消时其余的也取消
			 * 
			 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁
			 */
			//为checkedAllBox绑定单击响应函数
			checkedAllBox.onclick = function () {

				//alert(this === checkedAllBox);

				//设置多选框的选中状态
				for (var i = 0; i < items.length; i++) {
					items[i].checked = this.checked;
				}

			};

			//6.items
			/*
			 * 如果四个多选框全都选中，则checkedAllBox也应该选中
			 * 如果四个多选框没都选中，则checkedAllBox也不应该选中
			 */

			//为四个多选框分别绑定点击响应函数
			for (var i = 0; i < items.length; i++) {
				items[i].onclick = function () {

					//将checkedAllBox设置为选中状态
					checkedAllBox.checked = true;

					for (var j = 0; j < items.length; j++) {
						//判断四个多选框是否全选
						//只要有一个没选中则就不是全选
						if (!items[j].checked) {
							//一旦进入判断，则证明不是全选状态
							//将checkedAllBox设置为没选中状态
							checkedAllBox.checked = false;
							//一旦进入判断，则已经得出结果，不用再继续执行循环
							break;
						}

					}

				};
			}

		};

	</script>
</head>

<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>

</html>